<template>
  <div class="standard">
    <el-card>
      <el-input class="keyword" placeholder="请输入关键字，按回车查找" v-model="q.keyword" size="small" @keyup.enter.native="handleSearch" />
      <el-button type="primary" size="small" @click="handleAdd('operate_modal')">新增</el-button>
    </el-card>
    <div style="height:10px"></div>
    <el-table :data="tableData" :height="tableHeight">
      <el-table-column prop="payId" label="收款编号"></el-table-column>
      <el-table-column prop="payDate" label="收款日期"></el-table-column>
      <el-table-column prop="custName" label="客户"></el-table-column>
      <el-table-column prop="projectName" label="项目"></el-table-column>
      <el-table-column prop="payType" label="收款方式">
        <template slot-scope="scope">
          {{PAY_TYPE[scope.row.payType]}}
        </template>
      </el-table-column>
      <el-table-column prop="count" label="金额"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间"></el-table-column>
      <el-table-column width="200" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit('operate_modal', scope.row)">编辑</el-button>
          <el-button type="text" v-if="scope.row.ifUse === 1" @click="handleToggle(scope.row)">停用</el-button>
          <el-button type="text" v-else @click="handleToggle(scope.row)">启用</el-button>
          <el-button type="text" @click="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <OperateModal ref="operate_modal" @ok="handleSearch" />
  </div>
</template>

<script>
import OperateModal from './modal/payModal.vue'
import { indexMixin } from '@/utils/mixin'
import { getPayList, removePay, ifusePay } from '@/api/account'
export default {
  data () {
    return {
      PAY_TYPE: {
        1: '银行承兑', 2: '银行转账', 3: '现金', 4: '支票'
      },
      tableData: [],
      q: {
        keyword: ''
      }
    }
  },
  mixins: [indexMixin],
  components: {
    OperateModal
  },
  created () {
    this.handleSearch()
  },
  computed: {
    tableHeight () {
      // const pagination = 60
      const condition = 84
      const pagePadding = 40
      const header = 60
      return window.innerHeight - condition - pagePadding - header
    },
  },
  methods: {
    handleSearch () {
      this.queryList()
    },
    handleRemove (row) {
      if (!row.id) {
        this.$message.warning('数据异常：缺少id')
        return;
      }
      this.$confirm('确定要删除吗？', '提示').then(async () => {
        await removePay(row.id)
        this.handleSearch()
      })
    },
    async queryList () {
      const res = await getPayList(this.q)
      if (res.code === 200) {
        this.tableData = res.data
      } else {
        this.tableData = []
        this.$message.error(res.msg)
      }
    },
    async handleToggle (row) {
      if (!row.id) {
        this.$message.warning('数据异常：缺少id')
        return;
      }
      const res = await ifusePay(row.id)
      if (res.code === 200) {
        this.handleSearch()
      } else {
        this.$message.error(res.msg)
      }
    },
  }
}
</script>

<style lang="less" scoped>
.standard {
  height: 100%;
}
</style>